<template>
  <div class="section">
    <h2>成瘾与社交冲突分析</h2>
    <div class="chart-container">
      <div id="addictionSocialConflictChart" class="chart"></div>
      <div id="usageMentalHealthChart" class="chart"></div>
    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts';

export default {
    name:'AddictedAndSocial',
  data() {
    return {
      stats: {
        addictionScores: [2, 3, 4, 5, 6, 7, 8, 9],
        socialConflicts: [0, 1, 2, 2, 3, 3, 4, 4],
        usageHours: [1,2,3,4,5,"6+"], // 日均使用时长
        mentalHealthScores: [9,8,7,7,6,5] // 心理健康评分
      }
    };
  },
  mounted() {
    const charts = {
      usageMentalHealthChart: echarts.init(document.getElementById('usageMentalHealthChart')),
      addictionSocialConflictChart: echarts.init(document.getElementById('addictionSocialConflictChart'))
    };
     charts.usageMentalHealthChart.setOption({
      title: { text: '社交平台使用时间与心理健康分析' },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      xAxis: {
        type: 'category',
        data: this.stats.usageHours,
        name: '日均使用时长',
        axisLabel: { formatter: '{value}' }
      },
      yAxis: {
        type: 'value',
        name: '心理健康评分',
        min: 0,
        max: 10,
        interval: 1
      },
      series: [{
        data: this.stats.mentalHealthScores,
        type: 'line',
        smooth: true,
        color: '#1E90FF', // 曲线的颜色
        lineStyle: { width: 2 }
      }]
    });

    charts.addictionSocialConflictChart.setOption({
      title: { text: '成瘾分数与社交冲突分析' },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      xAxis: {
        type: 'category',
        data: this.stats.addictionScores,
        name: '成瘾分数',
        axisLabel: { formatter: '{value}' }
      },
      yAxis: {
        type: 'value',
        name: '社交冲突',
        min: 0,
        max: 5,
        interval: 1
      },
      series: [{
        data: this.stats.socialConflicts,
        type: 'line',
        smooth: true,
        color: '#FF6347', // 曲线的颜色
        lineStyle: { width: 2 }
      }]
    });
  }
};
</script> 

<style scoped>
  .section {
    background: white;
    border-radius: 35px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-left: 15px;
    margin-right: 15px;
  }

  .section h2 {
    color:#4a90e2;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
  }

  .chart-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
  }

  .chart {
    height: 400px;
    border-radius: 10px;
    padding: 15px;
    background: white;
  }
</style>